<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">日志管理</h3>
                <div class="box-tools">
                    <div class="input-group input-group-sm" style="width: 350px;">
                        <input type="text" name="table_search" id="searchNameId"
                               class="form-control pull-right" placeholder="用户名">

                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
                            </button>
                            <button type="button" class="btn btn-default btn-delete">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover" id="log-table">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>用户名</th>
                        <th>操作</th>
                        <th>请求方法</th>
                        <th>请求参数</th>
                        <th>IP</th>
                        <th>执行时长</th>
                    </tr>
                    </thead>

                    <tbody id="tbodyId">
                    <tr>
                        <td colspan="7">数据正在加载中...</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div id="pageId" class="box-footer clearfix" dm="100">

            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#pageId").load("doPageUI", doGetObjects);  // 方法后不能加(),否则是立刻执行
        // 注册查询栏点击事件
        $(".input-group-btn").on("click", ".btn-search", doQueryObjects);

    })

    function doGetObjects() {
        let pageCurrent = $("#pageId").data("pageCurrent");
        if (!pageCurrent) pageCurrent = 1;
        let params = {pageCurrent: pageCurrent};
        let queryName = $("#searchNameId").val(); // 获取输入的名字
        if (queryName) params.username = queryName;
        let url = 'log/doFindPageObjects';
        $.ajax({
            url: url,
            data: params,
            success(result) {
                // 处理查询到的结果
                console.log("result" + result);
                doHandleQueryResponseResult(result);
            }
        })
    }

    function doHandleQueryResponseResult(result) {
        if (result.state == 1) {
            doSetTableBodyRows(result.data.records);
            doSetPagination(result.data) //pageObject
        } else {
            doSetTableBodyErrors(result.message);
        }

    }

    // 成功执行的代码
    function doSetTableBodyRows(records) {
        let tBody = $("#tbodyId");
        tBody.empty() //清空元素内部
        records.forEach((item, i) => tBody.append(doCreateRow(item, i)));
    }

    //渲染行
    function doCreateRow(item, i) {
        return `<tr>
            <td> ${i + 1} </td>
            <td> ${item.username} </td>
            <td> ${item.operation} </td>
            <td> ${item.method} </td>
            <td> ${item.params} </td>
            <td> ${item.ip} </td>
            <td> ${item.time} </td>
           </tr>`
    }

    // 呈现服务端错误信息
    function doSetTableBodyErrors(message) {
        let thColNums = $("#log-table>thead>tr>th").length;
        let tBody = $("#log-table>tbody");
        let msgRow = `<tr><td colspan=${thColNums}>${message}</td></tr>`;
        tBody.html(msgRow)
    }


    // 定义事件处理函数
    function doQueryObjects() {
        $("#pageId").data("pageCurrent", 1);
        doGetObjects();
    }

</script>






